﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jQuery Thumbnail jsCarousel</title>

    <script src="jquery-1.4.4.min.js" type="text/javascript"></script>
	<script>var jq14 = jQuery.noConflict(true); </script>
    <script src="jsCarousel.js" type="text/javascript"></script>

    <link href="jsCarousel.css" rel="stylesheet" type="text/css" />

    <script type="text/javascript">
	
        jq14(document).ready(function() {
            jq14('#jsCarousel').jsCarousel({ onthumbnailclick: function(src) { alert(src); }, autoscroll: true });
        });
    </script>

    <style type="text/css">
        body
        {
            background-color: #2F2F2F;
        }
        #wrapper
        {
            margin-left: 100px;
            margin-top: 100px;
        }
    </style>
</head>
<body>
    <div id="wrapper">
        <div id="jsCarousel">
            <div>
                <img src="images/img_1.jpg" /><br />
                <span class="thumbnail-text">Image Text</span></div>
            <div>
                <img src="images/img_2.jpg" /><br />
                <span class="thumbnail-text">Image Text</span></div>
            <div>
                <img src="images/img_3.jpg" /><br />
                <span class="thumbnail-text">Image Text</span></div>
            <div>
                <img src="images/img_4.jpg" /><br />
                <span class="thumbnail-text">Image Text</span></div>
            <div>
                <img src="images/img_5.jpg" /><br />
                <span class="thumbnail-text">Image Text</span></div>
            <div>
                <img src="images/img_6.jpg" /><br />
                <span class="thumbnail-text">Image Text</span></div>
            <div>
                <img src="images/img_7.jpg" /><br />
                <span class="thumbnail-text">Image Text</span></div>
            <div>
                <img src="images/img_8.jpg" /><br />
                <span class="thumbnail-text">Image Text</span></div>
            <div>
                <img src="images/img_9.jpg" /><br />
                <span class="thumbnail-text">Image Text</span></div>
            <div>
                <img src="images/img_10.jpg" /><br />
                <span class="thumbnail-text">Image Text</span></div>
            <div>
                <img src="images/img_11.jpg" /><br />
                <span class="thumbnail-text">Image Text</span></div>
            <div>
                <img src="images/img_12.jpg" /><br />
                <span class="thumbnail-text">Image Text</span></div>
            <div>
                <img src="images/img_13.jpg" /><br />
                <span class="thumbnail-text">Image Text</span></div>
            <div>
                <img src="images/img_14.jpg" /><br />
                <span class="thumbnail-text">Image Text</span></div>
            <div>
                <img src="images/img_15.jpg" /><br />
                <span class="thumbnail-text">Image Text</span></div>
            <div>
                <img src="images/img_16.jpg" /><br />
                <span class="thumbnail-text">Image Text</span></div>
        </div>
    </div>
</body>
</html>
